<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="vendor/cherry-markdown-0.8.49/dist/cherry-markdown.min.css">
<style>
    /* 覆盖 Cherry Markdown 全屏模式的 z-index */
    .cherry.fullscreen {
        z-index: 1050 !important; /* 确保 z-index 足够大，覆盖其他元素 */
    }
</style>
<body>
<%@ include file="/WEB-INF/partials/_start.jsp" %>

<form action="<%=request.getContextPath()%>/add-value" method="post" enctype="multipart/form-data">
    <input type="number" name="userAccount" value="<%=request.getSession(false).getAttribute("userAccount").toString()%>" required style="display: none">
    <div class="card-body">
        <div class="form-group">
            <label for="title">标题</label>
            <input type="text" class="form-control" id="title" name="title" placeholder="请输入博客标题" required>
        </div>
        <div class="form-group">
            <label for="content">内容</label>
            <textarea class="form-control" name="content" id="content" cols="30" rows="10" style="display: none;"></textarea>
            <div id="markdown-container" style="height:600px"></div>
        </div>
        <div class="form-group">
            <label for="cover">封面图（选填）</label>
            <input type="file" class="d-block" id="cover" name="cover" accept="image/*">
        </div>
    </div>
    <!-- /.card-body -->

    <div class="card-footer">
        <button type="submit" class="btn btn-primary">保存</button>
    </div>
</form>

<%@ include file="/WEB-INF/partials/_end.jsp" %>
</body>
<script src="vendor/cherry-markdown-0.8.49/dist/cherry-markdown.min.js"></script>
<script>
    new Cherry({
        id: 'markdown-container',
        value: '',
        toolbars: {
            // 定义顶部工具栏
            //toolbar: ['bold','italic','strikethrough','|','color','header','ruby','|','list','panel','detail'],
            // 定义侧边栏，默认为空
            sidebar: ['theme'],
            // 定义顶部右侧工具栏，默认为空
            toolbarRight: ['fullScreen', 'export'],
            // 定义选中文字时弹出的“悬浮工具栏”，默认为 ['bold', 'italic', 'underline', 'strikethrough', 'sub', 'sup', 'quote', '|', 'size', 'color']
            bubble: false,
            // 定义光标出现在行首位置时出现的“提示工具栏”，默认为 ['h1', 'h2', 'h3', '|', 'checklist', 'quote', 'table', 'code']
            float: false,
        },
        callback: {
            afterChange: (text, html) => {
                document.getElementById('content').value = text;
            }
        },
        fileUpload: (file, callback) => {
            const formData = new FormData();
            formData.append('image', file);
            fetch('<%=request.getContextPath()%>/upload-image', {
                method: 'POST',
                body: formData
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        callback(data.file.url);
                    } else {
                        console.error('图片上传失败:', data.message);
                        alert('图片上传失败: ' + data.message);
                    }
                })
                .catch(error => {
                    console.error('图片上传出错:', error);
                    alert('图片上传出错，请稍后重试');
                });
        },
    });
</script>
</html>